<template>
    <chart-vue :buildOption="buildOption" />
</template>

<script lang="ts" setup>
import System from '~/utils/System'
import Theme from '~/utils/Theme'
import chartVue from './base.vue'
import { buildLine } from './build/line/buildLine'

let props = defineProps({
    colors: { default: Theme.chart.getColor1 as any },
    names: { default: [] as string[] },
    markLine: { default: null },
    markLineYAxis: { default: null },
    symbolSize: { default: 0 },
    symbol: { default: undefined },
    smooth: { default: false },
    random: { default: false },
    grid: {
        default: { top: '10px' }
    }
})

const getSeries = () => {
    let colors: any[] = Theme.getFun(props.colors)
    if (props.random) colors.randSort()

    let arr: echarts.LineSeriesOption[] = []
    colors.forEach((color) => {
        let pushObj: echarts.LineSeriesOption = {
            symbol: props.symbol,
            symbolSize: props.symbolSize,
            smooth: props.smooth,
            itemStyle: {
                color: `${color}`
            },
            areaStyle: {
                color: new System.echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: `${color}80`
                        },
                        {
                            offset: 1,
                            color: `${color}00`
                        }
                    ],
                    false
                )
            }
        }

        arr.push(pushObj)
    })
    return arr
}

const getLegend = (datap: any) => {
    if (props.names.length < 2)
        return {
            show: false
        }

    let dataT = []
    for (let i = 0; i < datap.yAxisData.length; i++) {
        dataT.push({
            name: props.names[i] ?? '',
            itemStyle: {
                color: props.colors[i]
            },
            textStyle: {
                color: Theme.getFun(Theme.chart.getFontColor1)
            }
        })
    }
    return {
        data: dataT,
        right: 0,
        show: true
    }
}

const getGrid = () => {
    return props.grid
}

const buildOption = (datap: any) => {
    let op = <echarts.EChartsOption>buildLine({
        type: 'line',
        xAxisData: datap.xAxisData,
        yAxisData: datap.yAxisData,
        series: getSeries(),
        legend: getLegend(datap),
        grid: getGrid(),
        names: props.names,
        xAxis: {
            axisLabel: {
                formatter: (item: any, item1: any) => {
                    return `${item}`
                }
            }
        }
    })
    return op
}
</script>
